<template>
    <div class="photo-wall-container">
      <div class="title-container">
        <h2 class="wall-title">跟世界游客发掘真正的{{ selectedProvince.name }}</h2>
        <button class="upload-btn" @click="uploadImage">
          <el-icon><CameraFilled /></el-icon>
          上传
        </button>
      </div>
  
      <div class="photo-wall">
        <div
          v-for="(photo, index) in sortedPhotos"
          :key="index"
          class="photo-item"
          @mouseenter="showInfo(index)"
          @mouseleave="hideInfo"
        >
          <img :src="photo.image" alt="photo" class="photo-img" />
          <div class="author" v-if="photo.author">
            <img :src="photo.author.avatar" alt="avatar" class="avatar" />
            <transition name="fade">
              <div class="hover-title" v-if="hoverIndex === index">
                {{ photo.title }}
              </div>
            </transition>
            <transition name="fade">
              <div class="hover-name" v-if="hoverIndex === index">
                {{ photo.author.name }}
              </div>
            </transition>
          </div>
          <transition name="fade">
            <div class="likes-overlay" v-if="hoverIndex === index">
              👍 {{ photo.likes }}
            </div>
          </transition>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, computed } from "vue";
  import { ElIcon } from "element-plus";
  import { CameraFilled } from "@element-plus/icons-vue";
  
  export default {
    name: "PhotoWall",
    components: { ElIcon, CameraFilled },
    props: {
      filteredSpots: Array,
      selectedProvince: {
        type: Object,
        default: () => ({
          name: "中国",
          introduction: "best",
        }),
      },
    },
    setup(props) {
      const hoverIndex = ref(null);
  
      const photos = [
        { image: "/test1.jpg", author: { name: "Alice", avatar: "/favicon.ico" }, title: "美景", likes: 30 },
        { image: "/test2.jpg", author: { name: "Bob", avatar: "/avatar2.jpg" }, title: "风景", likes: 50 },
        { image: "/test3.jpg", author: { name: "Carol", avatar: "/avatar3.jpg" }, title: "海边", likes: 20 },
        { image: "/test4.jpg", author: { name: "David", avatar: "/avatar4.jpg" }, title: "山景", likes: 70 },
        { image: "/test5.jpg", author: { name: "Eve", avatar: "/avatar5.jpg" }, title: "城市", likes: 60 },
        { image: "/test6.jpg", author: { name: "Frank", avatar: "/avatar6.jpg" }, title: "森林", likes: 40 },
      ];
  
      const sortedPhotos = computed(() => {
        return photos.slice().sort((a, b) => b.likes - a.likes);
      });
  
      const showInfo = (index) => {
        hoverIndex.value = index;
      };
  
      const hideInfo = () => {
        hoverIndex.value = null;
      };
  
      const uploadImage = () => {
        console.log("上传图片功能");
      };
  
      return { sortedPhotos, hoverIndex, showInfo, hideInfo, uploadImage, photos };
    },
  };
  </script>
  
  <style scoped>
  /* 容器样式 */
  .photo-wall-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px;
    background: linear-gradient(to bottom, #f9f9f9, #fff);
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* 标题和上传按钮容器 */
  .title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  /* 标题 */
  .wall-title {
    font-size: 24px;
    font-weight: bold;
  }
  
  /* 上传按钮 */
  .upload-btn {
    background: #007bff;
    color: white;
    padding: 10px 16px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 123, 255, 0.3);
    transition: background 0.3s;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  
  /* 按钮悬浮效果 */
  .upload-btn:hover {
    background: #0056b3;
  }
  
  /* 让鼠标悬停时显示手型 */
  .upload-btn {
    cursor: pointer;
  }
  
  .upload-btn el-icon {
    margin-right: 5px;
  }
  
  /* 照片墙 */
  .photo-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    position: relative;
  }
  
  /* 照片项 */
  .photo-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
  }
  
  .photo-item:hover {
    transform: scale(1.05);
    cursor: pointer;
  }
  
  /* 照片 */
  .photo-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    border-radius: 15px;
  }
  
  /* 作者头像 */
  .author {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 2;
  }
  
  .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 3;
  }
  
  /* 标题显示在头像上方 */
  .hover-title {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 5px;
    font-size: 12px;
    white-space: nowrap;
    margin-bottom: 5px;
    border-radius: 3px;
    z-index: 2;
  }
  
  /* 作者姓名显示在头像右侧 */
  .hover-name {
    position: absolute;
    left: calc(100% + 5px);
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 5px;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 3px;
    z-index: 2;
  }
  
  /* 点赞数显示在图片右下角 */
  .likes-overlay {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 3px;
    z-index: 2;
  }
  
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s;
  }
  
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
  </style>
  